<template>
  <div>
    <button @click="flag = !flag">切换</button>
    <div class="item" v-if="flag">1</div>
    <div class="item" v-show="flag">2</div>
  </div>
</template>

<script>
// v-bind :
// v-on @ $event 修饰符 1. 事件修饰符 stop prevent 2. 按键修饰 enter esc
// v-if和v-show表现形式是一样的

// v-if和v-show的区别（面试题）
// 1. 原理上的区别：v-if是通过移除和创建节点来实现节点的显示和隐藏的 v-show是通过display:none来实现显示和隐藏的
// 2. 使用场景上的区别：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。(初始渲染开销 当值是false的时候，如果是v-if直接这块什么也不用做 但是v-show必须创建出来然后display:none)
export default {
  data() {
    return {
      flag: false,
    };
  },
};
</script>

<style scoped>
.item {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
}
</style>
